<template>
	<view class="home">
		<swiper indicator-dots="true" circular="true">
			<swiper-item v-for='item in swipers' :key="item.id" >
				<image :src='item.img'></image>
			</swiper-item>
		</swiper>
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="hot_goods">
			<view class="tit">商品推荐</view>
				<goods-list :goods='goods' @goodsItemClick='goGoodsList()'></goods-list>//用的是封装的组件
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue' 
	export default {
		data() {
			return {
			swipers:[],
			goods:[],
			navs:[
				{
				icon:'iconfont icon-ziyuan',
				title:'黑马超市',
				path:'/pages/goods/goods'
				},
				{
				icon:'iconfont icon-guanyuwomen',
				title:'联系我们',
				path:'/pages/contact/contact'
				},
				{
				icon:'iconfont icon-tupian',
				title:'社区图片',
				path:'/pages/pics/pics'
				},
				{
				icon:'iconfont icon-shipin',
				title:'学习视频',
				path:'/pages/videos/videos'
				},
			]
			}
		},
		onLoad() {
		this.getSwipers();
		this.getHotGoods()
		},
		components:{"goods-list":goodsList},//组件叫goods-list，把名字goodsList给它   goodsList导进来的名字
		methods: {
		//获取轮播图的数据 swiper 滑块视图容器 
			async getSwipers () {
			// console.log("获取轮播图的数据")
			// uni.request({
			// 	url:"http://localhost:8082/api/getlunbo",//这是请求的接口地址
			// 	success: res=>{
			// 		console.log(res);//因为要渲染到页面上 所有要存数据
			// 		if(res.data.status!==0){
			// 			return uni.showToast({
			// 				title:"获取数据失败"
			// 			})
			// 		}
			// 		this.swipers=res.data.message;
			// 	}
			// })   这里已经进行了二次封装
				const res = await this.$myRequest({     //返回的是一个promise对象
					url:'/api/getlunbo'
			})
				this.swipers=res.data.message
		},
			//获取热门商品列表数据
			async getHotGoods () {
				const res = await this.$myRequest ({
					url:'/api/getgoods?pageindex=1'
				})
					this.goods=res.data.message; 
			},
			//导航点击处理函数
			navItemClick (url) {
				uni.navigateTo({
					url
				})
			},
			
			//导航到商品详情页
			goGoodsList() {
				uni.navigateTo({
					url:'/pages/goods-detail/goods-detail'
				})
			}
		}
	}
</script>

<style lang="scss">
.home{
	swiper{
		width:750rpx;
		height: 410rpx;
		image{
			width: 100%;
			height: 100%;	
			
		}
	}

	.nav{
		display: flex;
		.nav_item{
			flex:auto;
			text-align: center;
		view{
			 width: 120rpx;
			 height: 120rpx;
			 background-color: $shop-color;
			 border-radius: 60rpx;
			 margin: 10px auto;
			 line-height: 120rpx;
			 color: #FFFFFF;
			 font-size: 50rpx;
			}
			.icon-tupian{
				font-size: 45rpx;
			}
		text{
			font-size: 30rpx;
		}
	}	
}
	.hot_goods{
		margin-top: 10px;
		background: #eee;
		overflow: hidden;
		// padding: 10rpx 0;
		.tit{
			height: 50px;
			line-height: 50px;
			color: $shop-color ;
			text-align: center;
			letter-spacing: 20px;
			background: #fff;
			margin: 7rpx 0;
			}
		
	}
}
</style>
